<template>
  <div class="person">
    姓：<input type="text" v-model="firstName" /> <br />
    名：<input type="text" v-model="lastName" /> <br />
    全名：<span>{{ fullName }}</span> <br />
    <button @click="changeFullName">全名改为：li-si</button>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed } from "vue";
// 数据
let firstName = ref("zhang");
let lastName = ref("san");

// 计算属性————只读取不修改
// let fullName = computed(()=>{
//     return firstName.value + '-' + lastName.value
// })

// 计算属性————既读取又修改
let fullName = computed({
  // 读取
  get() {
    return firstName.value + "-" + lastName.value;
  },
  // 修改
  set(val) {
    console.log("有人修改了fullName", val);
    firstName.value = val.split("-")[0];
    lastName.value = val.split("-")[1];
  },
});

// 方法
function changeFullName() {
  fullName.value = "li-si";
}
</script>
